const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
    mode: "development",
    // 入口文件的地址 是用相对路径
    devtool: 'cheap-module-eval-source-map',
    // development cheap-module-eval-source-map
    // production cheap-module-source-map
    entry: "./src/index.js",
    devServer: {
        contentBase: path.join(__dirname, 'bundle'),
        port: 8090,
        open: true,
        hot: true,
        hotOnly: true
    },
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use:[{
                loader: 'babel-loader',
                // bable的配置
                // options: {
                //     /*
                //     * 当我们在打包业务代码时 通过全局引入@babel/polyfill来将es6新语法转为es5
                //     * @babel/preset-env是将es6 转为 es5
                //     * 同时@babel/preset-env 可以接受不同的参数
                //     * {
                //     *   target: {
                //     *       chrome: "67" // 指定对应版本的浏览器的支持
                //     *   },
                //     *   useBuiltIns: 'usage' // 不全局导入@babel/polyfill填充的内容，而是按需导入
                //     * }*/
                //     // presets: [['@babel/preset-env', {
                //     //     targets: {
                //     //         chrome: "67"
                //     //     },
                //     //     useBuiltIns: 'usage'
                //     // }]]
                //     /*
                //     * 这里是类库打包时babel的配置
                //     * 我们不需要在入口文件顶部引入@babel.polyfill
                //     * 需要@babel/plugin-transform-runtime @babel/runtime
                //     * 如果corejs配置是false时 @babel/runtime
                //     * 如果corejs配置是2时 @babel/runtime-corejs2需要被安装
                //     * 如果corejs配置是3是 @babel/runtime-corejs3需要被安装*/
                //     // plugins: [["@babel/plugin-transform-runtime", {
                //     //     "absoluteRuntime": false,
                //     //     "corejs": 2,
                //     //     "helpers": true,
                //     //     "regenerator": true,
                //     //     "useESModules": false,
                //     //     "version": "7.0.0-beta.0"
                //     // }]]
                // }
            }]
        },{
            test: /\.(png|jpg|gif|svg)$/,
            use: [{
                loader: 'url-loader',
                options: {
                    name: (file) => {
                        // console.log(file); // file 输出当前模块所在的绝对位置
                        return '[name].[md5:hash:hex:8].[ext]'
                    },
                    limit: 1024 * 10,
                    outputPath: (url, resourcePath, context) => {
                        let isFont = resourcePath.includes('fonts');
                        return `${isFont ? 'fonts' : 'images'}/${url}`;
                    }
                }
            }]
        }, {
            test: /\.(css|scss|sass)$/,
            use: [{
                loader: 'style-loader'
            }, {
                loader: 'css-loader',
                options: {
                    importLoaders: 2,
                    // modules: true
                }
            },{
                loader: 'sass-loader', 
                options: {
                    prependData: `@import "./common.scss";`
                }
            }, 
            {
                loader: 'postcss-loader',
                // options: {
                //     ident: 'postcss',
                //     plugins: [
                //         require('autoprefixer')
                //     ]
                // }
            }
            ]
        }, {
            test: /\.(eot|ttf|woff|woff2)$/,
            use: [{
                loader: 'file-loader',
                options: {
                    name: (file) => {
                        console.log(file);
                        return '[name].[md5:hash:hex:8].[ext]'
                    },
                    outputPath: 'fonts'
                }
            }]
        }]
    },
    plugins: [
        new webpack.ProgressPlugin(),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'webpack',
            template: 'index.html',
            // minify: true,
            hash: true
        }),
        new webpack.HotModuleReplacementPlugin()
    ],
    // 打包文件输出地址
    output: {
        publicPath: '/',
        // 输出文件的名称
        filename: 'bundle.js',
        /**
         * 打包后的文件输出的位置
         * __dirname 是指当前模块所在的目录 绝对路径
         * __filename 是指当前模块的名称 绝对路径
         * path.resolve(...) 将路径片段 解析成绝对路径
         * */
        path: path.resolve(__dirname, 'bundle')
    }
}